<template>
<el-row :gutter="20">
    <el-col :span="6" :offset="8">
        <div :style="{height: windowHeight}"></div>
        <el-row>
            <el-button v-show="loginTypeBut.accountShow" @click="LoginType(1)" type="primary" plain>账号登陆</el-button>
            <el-button v-show="loginTypeBut.phoneShow" @click="LoginType(2)" type="primary" plain>手机登陆</el-button>
            <el-button v-show="loginTypeBut.qqShow" @click="LoginType(3)" type="primary" plain>QQ登陆</el-button>
        </el-row>
        <br>
        <el-form v-show="loginTypeBut.accountShow?false:true" ref="form" :model="accountForm" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="accountForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="accountForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loginButton(1)">立即登陆</el-button>
                <el-button @click="empty">取消</el-button>
            </el-form-item>
        </el-form>
        <el-form v-show="loginTypeBut.phoneShow?false:true" ref="form" :model="phoneForm" label-width="80px">
            <el-form-item label="手机号">
                <el-input v-model="phoneForm.phone" @change="chekePhone"></el-input>
            </el-form-item>
            <el-form-item label="验证码">
                <el-col :span="13">
                <el-input v-model="phoneForm.code"></el-input>
                </el-col>
                <el-col :span="11">
                <el-button size="mini" @click="phoneCode">发送验证码</el-button>
                </el-col>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="phoneForm.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loginButton(2)">立即登陆</el-button>
                <el-button @click="empty">取消</el-button>
            </el-form-item>
        </el-form>
    </el-col>
</el-row>
</template>
<style >
    .heig{
        height: 500px;
    }
</style>
<script>
export default {
    name : "Login",
    data() {
            return {
                windowHeight: (document.documentElement.clientHeight/3)+"px", //实时屏幕高度三分一
                accountForm: {
                    username: "",
                    password: "",
                },
                phoneForm:{
                    phone:"",
                    code:"",
                    password:"",
                },
                phoneIfExists : false,
                loginTypeBut:{
                    accountShow:false,
                    phoneShow:true,
                    qqShow:true,
                }
                
            }
    },
    methods: {
            //登陆类型
            LoginType(t){
                this.loginTypeBut.accountShow = false;
                this.loginTypeBut.phoneShow = false;
                this.loginTypeBut.qqShow = false;
                switch(t){
                    case 1:
                        this.loginTypeBut.phoneShow = true;
                        this.loginTypeBut.qqShow = true;
                        break;
                    case 2:
                        this.loginTypeBut.accountShow = true;
                        this.loginTypeBut.qqShow = true;
                        break;
                    case 3:
                        this.loginTypeBut.accountShow = true;
                        this.loginTypeBut.phoneShow = true;
                        this.openQQ();
                        break;
                }
            },
            openQQ(){
                let url = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101780702&redirect_uri=http://www.pawntest.com/qqlogin&state=qqLogin";
                let mtop = screen.height/2 - 160;
                let mleft = screen.width/2 - 225;
                let w = window.open(url,"TencentLogin","left="+mleft+",top="+mtop+",width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
                let _this = this;
                 //监听弹出的窗口向本窗口传递登陆成功或则失败的数据
                window.addEventListener("message",e => {
                    if(e.data != 'undefined') {
                        console.log(e.data);
                        //如何回来正确数据就进行窗口关闭以及登陆状态保存跳转操作
                        setTimeout(function() {
                            w.close();
                            localStorage.setItem("jwt", e.data);
                            _this.$router.push("/main");
                        },1000)
                    }  else {
                        console.log("q111111111");
                        setTimeout(function() {
                            w.close();
                            alert("该qq账号未注册")
                        },1000)
                    }
                });
            },
            //账号登陆
            loginButton(typ) {
                let accountForm = {
                            username:this.accountForm.username,
                            password:this.accountForm.password,
                        };
                let phoneForm = {
                    phone:this.phoneForm.phone,
                    code:this.phoneForm.code,
                    password:this.phoneForm.password,
                };
                switch(typ){
                    case 1:
                        phoneForm = null;
                        break;
                    case 2:
                        accountForm = null;
                        break;
                }
                let loginParam={
                        accountLogin:accountForm,
                        phoneLogin:phoneForm
                }
                this.$http.post("login",loginParam)
                    .then(resp => {
                        console.log(resp);
                        let data = resp.data;
                        if (data.state) {
                            this.empty();
                            alert("登陆成功");
                            localStorage.setItem("jwt", data.data);
                            this.$router.push("/main");
                        } else {
                            alert(data.massage);
                        }

                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            chekePhone(){
                this.$http.get("chekePhone",{
                    params:{
                        phone:this.phoneForm.phone
                    }
                })
                .then(resp => {
                        console.log(resp);
                        let data = resp.data;
                        if (data.state ) {
                            this.phoneIfExists = true;
                        }else{
                            alert(data.massage);
                        }

                    })
                .catch(error => {
                        console.log(error);
                    })
            },
            phoneCode(){
                if(!this.phoneIfExists){
                    alert("手机格式不正确");
                    return;
                }
                this.$http.get("phoneCode",{
                    params:{
                        phone:this.phoneForm.phone
                    }
                })
                .then(resp => {
                        console.log(resp);
                        let data = resp.data;
                        alert(data.massage);

                    })
                .catch(error => {
                        console.log(error);
                    })
            },
            empty(){
                this.accountForm = {
                    username: "",
                    password: "",
                };
                this.phoneForm = {
                    phone:"",
                    code:"",
                    password:"",
                };
            },
        },
        computed:{
            screeHeight(){// 屏幕高
                return (document.body.clientHeight)+"px";
            }
        }
}
</script>